<template>
  <view style="background: #f9f8f7; padding-bottom: 30rpx; min-height: 100vh">
    <view class="con1">
      <view class="adList">
        <view class="adb" @click="tabClick('0')">
          <image src="../../static/home/xtxx.png" class="i" mode="aspectFill" />
          <view class="adt">账户消息</view>
        </view>
        <view class="adb" @click="tabClick('1')">
          <image src="../../static/home/wlxx.png" class="i" mode="aspectFill" />
          <view class="adt">订单消息</view>
        </view>
        <view class="adb" @click="tabClick('2')">
          <image src="../../static/home/dtxx.png" class="i" mode="aspectFill" />
          <view class="adt">系统消息</view>
        </view>
      </view>
    </view>
    <view class="main">
      <template v-if="messageList?.length > 0">
        <view class="msgItem" v-for="(item, index) in messageList" :key="index">
          <view class="titleBox">
            <view class="title">{{ item.msgTitle }}</view>
            <view class="time">{{ dayjs(item.gmtCreate).format("YYYY-MM-DD HH:mm:ss") }}</view>
          </view>
          <view class="ctn">{{ item.content }}</view>
          <!-- <view class="btn">立即查看</view> -->
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center"> <u-empty mode="list"></u-empty> </view>
    </view>
    <u-loadmore v-if="messageList?.length > 0" height="30" :status="status" />
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";
//@ts-ignore
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { selectMsgLst } from "@/api/my";
import dayjs from "dayjs";
const messageList = ref<any[]>([]);
onShow(async () => {
  const userId = uni.getStorageSync("userId");
  if (!userId) {
    uni.redirectTo({ url: "/pages/login/login" });
    return;
  }
  rest();
});
const tabActive = ref("0");
const tabClick = (type: "0" | "1" | "2" | "") => {
  tabActive.value = type;
  rest();
};

const status = ref("loadmore");
const page = ref(1);
const getList = async () => {
  if (status.value == "nomore") {
    return;
  }
  status.value = "loadmore";
  const res = await selectMsgLst({ pageNo: page.value, type: tabActive.value, userId: uni.getStorageSync("userId") });
  messageList.value = messageList.value.concat(res.msgList);
  if (!res.next) {
    status.value = "nomore";
  } else {
    status.value = "loadmore";
  }
};
onReachBottom(() => {
  page.value++;
  getList();
});
const rest = () => {
  page.value = 1;
  status.value = "loadmore";
  messageList.value = [];
  getList();
};
</script>
<style lang="less" scoped>
.con1 {
  padding: 22rpx;

  .t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .l {
      display: flex;
      align-items: center;

      margin-right: 10rpx;
      font-size: 32rpx;
      color: #3d3d3d;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 15px;
      }
    }
    .r {
      width: 36rpx;
      height: 36rpx;
    }
  }
  .adList {
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 32rpx 62rpx;
    align-items: center;
    border-radius: 20rpx;
    .adb {
      font-size: 24rpx;
      color: #333333;
      width: 130rpx;
      text-align: center;
      .i {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 15rpx;
      }
    }
  }
}
.msgItem {
  background: #ffffff;
  border-radius: 32rpx;
  padding: 40rpx;
  padding-bottom: 24rpx;
  margin-top: 20rpx;
  .titleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      line-height: 42rpx;
    }
    .time {
      font-size: 26rpx;
      color: #bebebe;
      line-height: 34rpx;
    }
  }
  .ctn {
    font-size: 26rpx;
    color: #595959;
    line-height: 36rpx;
    padding: 24rpx 0;
    //border-bottom: 1rpx solid #f7f7f7;
  }
  .btn {
    padding-top: 24rpx;
    font-size: 26rpx;
    color: #bebebe;
    line-height: 36rpx;
  }
}
</style>
